<template>
	<view class="g-h5 body-content">
		<u-navbar back-text="返回" title="详情"></u-navbar>
		<view class="collect-detail-content">
			<view class="book-text">{{collectDetail.content}}</view>
			<view class="list-b-view">
				<view class="list-b-time">
					{{collectDetail.time ? collectDetail.time : '1585926095536' | timeFrom('yyyy-mm-dd hh:MM:ss')}}
				</view>
				<view @tap.stop="goRead"><u-icon name="photo" size="36"></u-icon></view>
			</view>
			<view class="label-view">
				<view style="margin-top: -20rpx;" @tap.stop="show = true">标签：</view>
				<view class="label-text-view" style="background-color: rgba(0,0,0,0);" v-if="!label.length">暂无</view>
				<view class="label-text-view" v-else v-for="(item,index) in label" :key="index">{{item.name}}
					<view class="close-view" @tap.stop="deleteLabel(index)"><u-icon name="close-circle"></u-icon></view>
				</view>
			</view>
		</view>
		<view class="tips">tips:点击"标签"选择添加标签</view>
		<u-select v-model="show" :list="labelList" @tap.stop value-name="id" label-name="name"
			@confirm="selectConfim"></u-select>
		<u-tabbar v-model="tabCurrent" :list="tabList"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				label: [],
				show: false,
				labelList: [],
				collectDetail: {},
				tabList: [{
						iconPath: 'home',
						selectedIconPath: 'home-fill',
						text: '在读',
						customIcon: false,
						pagePath: '/pages/miniprogram/index'
							 					},
					{
						iconPath: 'photo',
						selectedIconPath: 'photo-fill',
						text: '书架',
						customIcon: false,
						pagePath: '/pages/miniprogram/books'
							 					},
					{
						iconPath: 'https://cdn.uviewui.com/uview/common/min_button.png',
						selectedIconPath: 'https://cdn.uviewui.com/uview/common/min_button_select.png',
						text: '书店',
						customIcon: false,
						pagePath: '/pages/miniprogram/bookshop'
							 					},
					{
						iconPath: 'play-right',
						selectedIconPath: 'play-right-fill',
						text: '我的',
						customIcon: false,
						pagePath: '/pages/miniprogram/user'
							 					},
							 				],
				tabCurrent: 0,
			}
		},
		onLoad(options) {
			this.labelList = this.$api.label_list()
			this.collectDetail = JSON.parse(options.data)
			this.label = this.collectDetail.label
		},
		methods: {
			goRead() {
				uni.navigateTo({ url: '/pages/miniprogram/reader?isbuy=' + 1 })
			},
			deleteLabel(index) {
				this.label.splice(index, 1)
			},
			selectConfim(e) {
				let value = e[0]
				if (value.value && this.label.length) {
					let index = this.label.findIndex(item => {
						return item.id === value.value
					})
					if (index === -1) {
						this.label.push({
							id: value.value,
							name: value.label
						})
					}
					this.$api.note_update(this.collectDetail.id, {
						...this.collectDetail,
						label: this.label
					})
				} else {
					this.label.push({
						id: value.value,
						name: value.label
					})
					this.$api.note_update(this.collectDetail.id, {
						...this.collectDetail,
						label: this.label
					})
				}
			}
		}
	}
</script>

<style scoped>
	.collect-detail-content {
		margin: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.collect-list-view {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #999;
	}

	.list-title {
		font-size: 30rpx;
	}

	.list-b-view {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
		border-bottom: 1rpx solid #999;
		padding-bottom: 20rpx;
	}

	.label-view {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.label-text-view {
		padding: 4rpx 20rpx;
		border-radius: 8rpx;
		background-color: antiquewhite;
		margin-left: 20rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.close-view {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
	}

	.tips {
		margin-left: 30rpx;
		margin-top: 30rpx;
		color: #999999;
	}
</style>